<template>
  <a-card :bordered="false">
    <div class="content">
      <mms-contract-list v-if="currentTab === 0" @nextStep="nextStep"></mms-contract-list>
      <mms-contract-details-list :status="materFilter.status" :id="materFilter.id" v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"></mms-contract-details-list>
      <mms-contract-clone-details-list :status="materFilter.status" :id="materFilter.id" v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep" @firstStep="firstStep"></mms-contract-clone-details-list>
    </div>
  </a-card>
</template>
<script>
  import MmsContractList from './MmsContractList'
  import MmsContractDetailsList from './MmsContractDetailsList'
  import MmsContractCloneDetailsList from './MmsContractCloneDetailsList'

  export default {
    name: 'MmsContractMain',
    mixins: [],
    components: {
      MmsContractList,
      MmsContractDetailsList,
      MmsContractCloneDetailsList
    },
    data () {
      return {
        currentTab: 0,
        materFilter:{
          active: 0,
          status:"",
          id:"",
        },
      }
    },
    methods: {
      // handler
      nextStep (filterObj) {
        this.materFilter.status = filterObj.status
        this.materFilter.id = filterObj.id
        if (this.currentTab < 3) {
          this.currentTab += 1
        }
      },
      prevStep () {
        if (this.currentTab > 0) {
          this.currentTab -= 1
        }
      },
      firstStep () {
        if (this.currentTab > 0) {
          this.currentTab = 0
        }
      },
    },
  }
</script>